<template>
    <view class="three wrapper style2">
        <view class="inner">
            <Loading :show="showLoading"/>
            <template v-if="emptyPic">
                <view class="align-center shake-chunk shake-constant shake-constant--hover" style="padding-top: 6em;">
                    <image src="https://i.loli.net/2019/10/16/CnoBqkweLcPgfNM.png"/>
                </view>
            </template>
            <view class="grid-style">
                <view class="box wow zoomIn cell"
                      v-for="item in article_list" :key="item.id"
                      :aria-controls="`${item.comment_count}条评论,${item.look}次阅读《${item.title}》`"
                      style="animation-duration: .6s;">
                    <navigator :url="`/pages/post/index?id=${item.id}&cid=${cid||item.cid}&index=${isIndex}`">
                        <view class="image fit">
                            <image lazy-load :lazy-load-margin="0" :src="item.pic"/>
                        </view>
                    </navigator>

                    <view class="content">
                        <view class="align-center title-tool-box">
                            <view class="title">
                                <navigator :title="item.title"
                                           :url="`/pages/post/index?id=${item.id}&cid=${cid||item.cid}&index=${isIndex}`">
                                    {{ item.title }}
                                </navigator>
                            </view>
                            <view class="title-tool">
                                <view class="inline-block">
                                    <uni-icons class="mr-6" color="#999" type="calendar" size="18"></uni-icons>
                                    <text>{{ item.create_time }}</text>
                                </view>
                                <view class="inline-block">
                                    <uni-icons class="mr-6" color="#999" type="list"></uni-icons>
                                    <text>{{ item.catename }}</text>
                                </view>
                            </view>
                        </view>
                        <view>{{ item.content }}</view>
                    </view>
                </view>
            </view>
            <PageMore ref="pageBtn" @nextnewpage="getArticles" v-if="pageStatus"/>
        </view>
    </view>
</template>

<script>
import {mapGetters} from 'vuex';
import Loading from '@/components/Loading';
import PageMore from '@/components/PageMore';
import {indexList} from "@/api";

export default {
    components: {
        Loading,
        PageMore,
    },
    computed: {
        isIndex() {
            let pages = getCurrentPages();
            let route = pages[pages.length - 1].route;
            if (route === 'pages/index/index') {
                return 'true';
            }
            return 'false';
        },
        ...mapGetters(['config']),
    },
    props: {
        cid: {type: String, default: ''}
    },
    data() {
        return {
            showLoading: true,
            pageStatus: null,
            emptyPic: false,
            article_list: []
        }
    },
    methods: {
        getArticles(n) {
            const p = {
                limitNumber: n,
                cid: this.cid
            }
            indexList(p).then(res => {
                let rowsList = res.rows
                this.showLoading = false;
                if (res.count > 0) {
                    rowsList.map(item => {
                        if (item.pic === "") {
                            item.pic = `https://picsum.photos/id/${item.id}/600/350`;
                        }
                        this.pageStatus = res.total_page === 0 ? null : true; // 显示条数按钮
                        if (this.$refs['pageBtn']) this.$refs['pageBtn'].moreTxt = 'More'; // 变回more文案
                    })
                } else {
                    this.emptyPic = true;
                }
                this.article_list = rowsList;
            })
        }
    },
    async mounted() {
        let page_number = parseInt(this.config.artlsit_number) || 3;
        let lo_pageNumber = parseInt(uni.getStorageSync('page_number' + this.cid));
        if (!lo_pageNumber) {
            uni.setStorageSync("page_number" + this.cid, page_number);
            lo_pageNumber = page_number; // 防止NaN
        }
        this.getArticles(lo_pageNumber)
    }
}
</script>
